<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_强制绑定class和style</title>
    <style>
        .cssp{
            font-size: 30px;
        }
        .vuep1{
            color:blue
        }
        .vuep2{
            color:red;
        }
    </style>
</head>
<!--
    改变页面的两种方式:1.改变数据 2.改变样式
    1.class绑定
        :class='xxx'
            xxx是字符串
            xxx是对象
            xxx是数组
    2.style绑定
        :stype = "{color:activecolor,fontsize:fontsize + 'px'}"
        其中activecolor/fontsize是data的属性
-->
<body>
    <div id="demo">
        <h1>1.class绑定 => :class='xxx'</h1>
        <p class="cssp" :class="vuep">xxx是字符串</p>
        <p :class="{vuep1:true,vuep2:false}">xxx是对象,用布尔值表示</p>
        <p :class="{vuep1:isP1,vuep2:isP2}">xxx是对象,用动态变量表示</p>
        <p :class="['vuep1']">xxx是数组</p>

        <h1>2.style绑定</h1>
        <p v-bind:style="{color:activecolor,fontsize:fontsize + 'px'}">style绑定</p>

        <button @click="update">更新</button>
    </div>
</body>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el:'#demo',
        data:{
           vuep:'vuep1',
           isP1:false,
           isP2:true,
           activecolor:'green',
           fontsize:50
        },
        methods:{
            update(){
              this.vuep = 'vuep2';
              this.isP1 = true;
              this.isP2 = false;
              this.activecolor = 'orange'
            }
        }
    });
</script>
</html>